import './RoadMap.css';
import { Image } from 'react-bootstrap';

function RoadMap() {
  return (
    <div className='roadMap' id="roadmap">
      <div className="roadMap-content">
        <div className='roadmap-content-txt'>
          <div className='roadMap-title-block'>
            <Image className='roadMap-icon-pin' src="images/roadMap/pin.png" />
            <div className='roadMap-title'>Roadmap</div>
          </div>
          <div className='roadmap-content-item'>
            <div>
              <Image className='roadMap-icon-left' src="images/roadMap/icon_left.png" />
              Launch Marketing campaigns across social media
            </div>
            <div className='roadMap-txt'>
              platforms to spread awareness of Mission Zella to
            </div>
            <div className='roadMap-txt'>
              gain more discord members, generate hype and
            </div>
            <div className='roadMap-txt'>
              excitement around the project!
            </div>
          </div>

          <div className='roadmap-content-item'>
            <div>
              <Image className='roadMap-icon-left' src="images/roadMap/icon_left.png" />
              The first batch of NFT will start mint in mid-
            </div>
            <div className='roadMap-txt'>December for one month (if mint ends, it will end </div>
            <div className='roadMap-txt'>earlier)</div>
          </div>

          <div className='roadmap-content-item'>
            <div>
              <Image className='roadMap-icon-left' src="images/roadMap/icon_left.png" />
              The second batch will be held in February 2022,
            </div>
            <div className='roadMap-txt'>and new gameplay will be launched.</div>
          </div>

          <div className='roadmap-content-item'>
            <div>
              <Image className='roadMap-icon-left' src="images/roadMap/icon_left.png" />
              The third batch will be held in March 2022, and
            </div>
            <div className='roadMap-txt'>new rewards will be given.</div>
          </div>
        </div>
        <div className='roadmap-person-block'>
          <Image className='roadmap-person' src="images/roadMap/person.png" />
        </div>
      </div>
    </div >
  );
}

export default RoadMap;
